<template>
    <el-tabs type="border-card" :style="{height:`${height}px`}">
        <el-tab-pane label="编辑用户">
            <el-form
                label-width="90px"
                :model="formLabelAlign"
                ref="ruleForm"
            >
                <el-form-item label="用户名" prop="user_name">
                    <el-input
                        style="width: 50%;"
                        v-model="formLabelAlign.user_name"
                    > </el-input>
                </el-form-item>

                <el-form-item label="邮箱" prop="email">
                    <el-input
                        style="width: 50%;"
                        v-model="formLabelAlign.email"
                    > </el-input>
                </el-form-item>

                <el-form-item label="激活" prop="is_active">
                    <el-switch v-model="formLabelAlign.is_active"></el-switch>
                </el-form-item>

                <el-form-item label="管理员" prop="is_superuser">
                    <el-switch v-model="formLabelAlign.is_staff"></el-switch>
                </el-form-item>

<!--                <el-form-item label="超级管理员" prop="is_superuser">-->
<!--                    <el-switch v-model="formLabelAlign.is_superuser"></el-switch>-->
<!--                </el-form-item>-->

                <el-form-item label="权限组" prop="groupName">
                    <el-checkbox-group v-model="formLabelAlign.groups">
                        <el-checkbox
                            v-for="item in groupArr"
                            :key="item.group_id"
                            :label="item.group_id"
                        >{{ item.group_name }}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submit">立即提交</el-button>
                </el-form-item>

            </el-form>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
    import {getHeight} from "@/utils/regular";
    import { userDetail,userEdit } from '@/api/user'
    import { groupList } from '@/api/permission'

    export default {
        name: "userEdit",
        data() {
            return {
                user_id: '',
                height:0,
                formLabelAlign:{
                    user_name:'',
                    email:'',
                    is_active:'',
                    is_superuser:'',
                    is_staff:'',
                    groups:'',
                },
                groupArr:[],
            }
        },
        created(){
            this.user_id = this.$route.params.user_id
            this.getDetail()
            this.getGroups()
            this.height = getHeight() - 92
        },
        methods: {
            getDetail() {
                userDetail(this.user_id)
                    .then(res=>{
                        if(Number(res.code)===0){
                            let data = res.data
                            Object.assign(this.formLabelAlign,{
                                user_name:data.username,
                                email:data.email,
                                is_active:data.is_active,
                                is_superuser:data.is_superuser,
                                is_staff:data.is_staff,
                                groups:data.groups,
                            })
                        }else{
                            this.$Alert({ message:res.msg, type:'error' })
                        }
                    })
            },
            getGroups(){
                groupList({ pagesize:9999 })
                    .then(res=>{
                        if(Number(res.code)===0){
                            this.groupArr = res.data
                        }else{
                            this.$Alert({ message:res.msg, type:'error' })
                        }
                    })
            },
            submit(){
                let formLabelAlign = this.formLabelAlign
                let params = {
                    user_name:formLabelAlign.user_name,
                    email:formLabelAlign.email,
                    is_staff:formLabelAlign.is_staff,
                    is_active:formLabelAlign.is_active,
                    is_superuser:formLabelAlign.is_superuser,
                }

                userEdit(this.user_id,params)
                    .then(res=>{
                        if(Number(res.code)===0){
                            this.$Alert({
                                message:res.msg,
                                type:'success',
                                callback:()=>this.$router.push('/admin/userList')
                            })
                        }else{
                            this.$Alert({ message:res.msg, type:'error' })
                        }
                    })
            }
        },
    }
</script>

<style scoped>

</style>
